<script setup lang="ts">
import { getChangeList } from '@/api/project-update/apply'
import { ref } from 'vue'
import { Message } from 'element-ui'
import { total } from '@/views/project-update/components/chnage-config'
import HistoryForm from '@/views/project-update/components/history-form.vue'
import { getLogContent } from '@/views/project-update/components/logContent'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '变更记录',
  },
  id: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['closeDialog'])

const closeDialog = (flag) => {
  emit('closeDialog')
}

const activeNames = ref(['0'])

const infoList = ref([])

const getChangeInfo = () => {
  getChangeList(props.id).then((res) => {
    if (res.success) {
      infoList.value = res.data?.map((item) => {
        const children = getLogContent(item.fromJson)
        return {
          title: item.createTime,
          children: children,
        }
      })
    } else {
      Message.error(res.message)
    }
  })
}

const formVisible = ref(false)

const handleCloseDialog = () => {
  formVisible.value = false
}

const time = ref('')

const handleViewHistory = (t) => {
  time.value = t
  formVisible.value = true
}

const handleDialogOpen = () => {
  // console.log('handleDialogOpen')
  getChangeInfo()
}
</script>

<template>
  <el-dialog
    :visible="visible"
    :title="title"
    class="change-log-special-dialog"
    align-center
    @opened="handleDialogOpen"
    @close="closeDialog"
    width="40%"
  >
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(item, index) in infoList"
        :key="item.id"
        :title="item.title"
        :name="index + ''"
      >
        <template slot="title">
          {{ item.title }}
          <el-button
            type="text"
            class="change-button"
            @click="handleViewHistory(item.title)"
            >查看变更前版本</el-button
          >
        </template>
        <div class="change-item" v-for="(val, idx) in item.children" :key="idx">
          <div class="field-name">{{ idx + 1 + '、' }}{{ val.name }}</div>
          <div><span>原为：</span>{{ val.oldVal }}</div>
          <div><span>变更为：</span>{{ val.newVal }}</div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <history-form
      :time="time"
      :id="id"
      :visible="formVisible"
      @closeDialog="handleCloseDialog"
    />
  </el-dialog>
</template>

<style lang="scss">
.change-log-special-dialog {
  .el-dialog__body {
    max-height: 600px !important;
    overflow-y: auto;

    .el-collapse-item__header {
      position: relative;
      .change-button {
        position: absolute;
        right: 46px;
      }
    }
  }
}
</style>
